<template>
  <el-dialog
    :model-value="distributeVisible"
    title="分配角色"
    width="500"
    :before-close="beforeClose"
  >
    <el-select
      v-model="selectedRoles"
      multiple
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in distributeRoles"
        :key="item.value"
        :label="item.key"
        :value="item.value"
      />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeDistributedManagerRoleDialog(false)">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="
            changeDistributedManagerRoleDialog(false), confirmDistributeRoles()
          "
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { GetManagerRoleApiListType } from '#/mms/managerRoleType'
import { reactive, toRefs, watch } from 'vue'

const props = defineProps<{
  distributeVisible: boolean
  rowRoles: GetManagerRoleApiListType[]
}>()

const { distributeVisible, rowRoles } = toRefs(props)

const options = [
  {
    key: '订单管理员',
    value: 0,
  },
  {
    key: '咨询管理员',
    value: 1,
  },
  {
    key: '商品管理员',
    value: 2,
  },
  {
    key: '超级管理员',
    value: 3,
  },
]

const state = reactive<{
  distributeRoles: GetManagerRoleApiListType[]
  selectedRoles: number[]
}>({
  distributeRoles: options,
  selectedRoles: [],
})

const { distributeRoles, selectedRoles } = toRefs(state)

watch(rowRoles, () => {
  selectedRoles.value = rowRoles.value.map((item) => item.value)
})

const emits = defineEmits<{
  changeDistributedManagerRoleDialog: [visible: boolean]
  confirmDistributeRoles: [selectedRoles: number[]]
}>()

const changeDistributedManagerRoleDialog = (visible: boolean) => {
  emits('changeDistributedManagerRoleDialog', visible)
}

const confirmDistributeRoles = () => {
  emits('confirmDistributeRoles', selectedRoles.value)
}

const beforeClose = (done: Function) => {
  emits('changeDistributedManagerRoleDialog', false)
  done()
}
</script>

<style lang="less" scoped></style>
